<template>
<div>
    <down-options></down-options>
    <ul v-for="(item, value) in lists" :key="value">
        <li class="content" :class="[item.order>3?'border_style2':'border_style1']" >
            <div class="left" @click="goDetail(item)">
                <p>{{item.contry}}</p>
                <!-- <p class="font_style font_class">目标销售收入</p> -->
                <p class="font_style">{{item.count}}</p>
                <div class="logo" :class="[item.order>3?'hid':'display']">
                    <div class="block">{{item.order}}</div>
                    <div class="triangle"></div>
                </div>
            </div>
            <div class="right">
                <van-row>
                    <van-col span="8" class="list" v-for="(el,value) in selectItems" :key="value">
                        <p class="font_style">{{el.lable}}</p>
                        <p class="font_style">{{item.date[el.value]}}</p>
                    </van-col>
                </van-row >
            </div>
        </li>
    </ul>
    <van-dialog
        v-model="showDialog"
        confirmButtonColor='rgba(31, 31, 241, 0.829)'
      >
      <div class="dialog-container">
        <iframe
            :src="url"
        frameborder="0"></iframe>
        <!-- <iframe src="http://wwww.baidu.com" frameborder="0"></iframe> -->
      </div>
     </van-dialog>
</div>
</template>

<script>
import {
  Row, Col, Dialog,
} from 'vant';
import config from './select-item.json';
import DownOptions from './DownOptions.vue';
import provinceData from '../../mock/province-demon.json';

export default {
  data() {
    return {
      config,
      selectItems: '',
      lists: provinceData.map((ele, index) => {
        let tmp = ele;
        tmp.id = index + 1;
        tmp.order = index + 1;
        return tmp;
      }),
      showDialog: false,
      url: '',
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Col.name]: Col,
    [Row.name]: Row,
    DownOptions,
  },
  methods: {
    dataList() {
      this.selectItems = this.config.find(el => el.id === 1).dataList;
    },
    goDetail(item) {
      const param = [{ paramKey: 'province', joinType: 'and', conditionList: [{ operate: '=', value: item.contry }] }];
      this.url = `https://10.54.19.167/dashboard/view/pc.htm?pageId=8adbb1fa-f2bf-4b13-9571-45b048736f46&dd_orientation=auto&param=${window.encodeURIComponent(JSON.stringify(param))}`;
      this.showDialog = true;
    },
  },
  created() {
    this.dataList();
  },
};
</script>

<style lang="less" scoped>
.content{
    width: 375px;
    height: 180px;
    background: #fff;
    border-top:2px solid orange;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.border_style1{
    border-top:2px solid orange;
}
.border_style2{
    border-top:2px solid rgb(201, 255, 255);
}
.left{
    width: 110px;
    background: rgba(23, 100, 100, 0.11);
    height: 100%;
    text-align: center;
    float: left;
    position: relative;
    p:first-child{
        font-size: 14px;
        padding-top: 63px;
    }p:nth-child(2){
        padding-top: 18px;
        color: rgb(145, 143, 143);

    }p:first-child{
        font-size: 14px;
    }
}
.font_style{
    font-size: 13px;
}
.font_class{
    float: left;
    margin-left:16px;
}
.right{
    width: calc(~"375px - 110px");
    background-color: #fff;
    height: 100%;
    float: left;
    .list{
        height: 60px;
        border-right: 1px solid rgb(218, 218, 215);
        border-bottom: 1px solid rgb(218, 218, 215);
        // border-top: 0px solid rgb(185, 185, 183);
        text-align: center;
        p:first-child{
        padding-top: 10px;
        color: rgb(145, 143, 143);
    }
    }
}
.icon{
    font-size: 13px;
    margin-top: 5px;
}
.triangle{
    width: 0;
    height: 0;
    border-width: 13px;
    border-style: solid;
    border-color: orange transparent transparent transparent;
}
.block{
    width: 26px;
    height: 23px;
    line-height: 23px;
    background: orange;
    font-size: 15px;
    color: #fff;
}
.logo{
    position: absolute;
    top: 0;
    left: 43px;
}
.hid{
    display: none;
}
.display{
    display: block;
}
.dialog-container{
    height: 70vh;
}
.dialog-container iframe{
    height: 65vh;
    width: 100%;
}
</style>
